<template>

      <el-card class="card-boxs" :body-style="{ padding: '20px',}"  shadow="never" >
                  <template #header>
      <div class="card-header">
        <span>{{Data.name}}</span>
      </div>
    </template>
            <div class="content">
               <div><span class="content-num">{{Data.quantity}}</span> <span class="content-unit">{{Data.unit}}</span></div>
               <div class="compare">
                 <span class="content-compare-text">同比</span>
                 <span class="content-icon" v-if="Data.type==0"> <el-icon class="iconSpin" size="14" color=" #FF0101"><sc-icon-UpDownMark /></el-icon> </span>
                 <span class="content-icon" v-if="Data.type==1"> <el-icon  size="14" color="#00A331"><sc-icon-UpDownMark /></el-icon> </span>
                 <span class="content-compare-num" v-if="Data.type==1">{{Data.yearOnYear}}%</span>
                  <span class="content-compare-num1" v-if="Data.type==0">{{Data.yearOnYear}}%</span>
               </div>
            </div>
               
              <img class="content-img" v-if="data.group==0" src="../../../../assets/img/trunoverDay1.png" alt="">
              <img class="content-img" v-if="data.group==1" src="../../../../assets/img/trunoverDay2.png" alt="">
              <img class="content-img" v-if="data.group==2" src="../../../../assets/img/trunoverDay3.png" alt="">
              <img class="content-img" v-if="data.group==3" src="../../../../assets/img/trunoverDay4.png" alt="">
              
                    <el-tooltip
        class="box-item"
        effect="dark"
        content=""
        placement="top-start"
      >
        <el-icon class="iconquestion" size="18" color="#999999"><sc-icon-Question /></el-icon>
      </el-tooltip>
      </el-card>

</template>
<script >
export default {
        props:{
        data:{type:Object,default: ()=>{}},
        // height:{ type: String, default: '300px' },
        },
    data(){
      return{
          Data:this.data
      }
    },
    created(){
    }
}
// import { ref } from 'vue'

// const currentDate = ref(new Date())
</script>
<style scoped>
/* /deep/.el-card__header{
  padding: 20px 20px 0px 20px!important;
} */
.card-boxs{
  position: relative;
}
.iconquestion{
  position: absolute;
  right: 20px;
  top: 20px;
}
.box-card{
    padding: 30px;
    width: 360px;
    height: 200px;
}
.content{
  width: 100%;
 display: flex;
 justify-content: space-between;
}
.content-num{
  font-size: 24px;
font-weight: 500;
color:  var(--el-color-text-3);
line-height: 30px;
margin-right: 10px;
}
.content-unit{
  font-size: 17px;
font-weight: 400;
color: var(--el-color-text-6);
line-height: 30px;
}
.content-compare-text{
  font-size: 17px;
font-weight: 400;
color: var(--el-color-text-6);
line-height: 30px;
}
.content-icon{
  margin-left: 8px;
  margin-right: 8px;
}
.iconSpin{
  transform:rotate(180deg)
}
.compare{
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-compare-num{
  font-size: 17px;
font-weight: 500;
color: #00A331;
line-height: 30px;
}
.content-compare-num1{
  font-size: 17px;
font-weight: 500;
color: #FF0101;
line-height: 30px;
}
.content-img{
  width: 100%;
  height: 13px;
  margin-top: 20px;
}
.card-header{
    font-size: 17px;
font-weight: normal;
color: var(--el-color-text-3); 
line-height: 34px;
}
</style>